<template>
  <div class="contentAnimation">
    <div class="video">
      <img src="../assets/op.gif" alt="">
    </div>
    <button class="skipButton" @click="pass">跳过</button>

  </div>
</template>

<script>
import 'animate.css'

// import src from '@/assets/vivo.mp4'
export default {
  name: "Animation",
  data() {
    return {
      timer:null,
    }
  },
  methods:{
    pass(){
      if(this.timer){
        clearTimeout(this.timer)
      }
      this.$router.push({path: '/index'})
    }
  },
  mounted() {
    this.timer = setTimeout(()=>{
      clearTimeout(this.timer)
      this.$router.push({path: '/index'})
    },8000)
  }
}
</script>

<style scoped lang="less">
.contentAnimation {
  position: relative;
  .h1 {
    height: 50px;
  }
  .video {
    width: 100%;
    height: 100vh;
    overflow: hidden;
    border: 0px;
    >img{
      margin-top: -30px;
      width: 100%;
      height: 110vh;
      pointer-events: none;
    }
  }
  .skipButton {
    position: absolute;
    top: 20px;
    right: 25px;
    background-color: white;
    padding: 1px 19px;
    border-radius: 26px;
    border: 1px solid #f4f4f4;
    z-index: 99999;
  }
}

</style>